<template>
  <div class="hello">
    <m-header modile-title="点击增加Select" go-back="true"></m-header>
    <div class="input-box" v-for="(i,k) in inputNum">
      <select name="" :ref="'input'+k" id="">
        <option value="">请选择</option>
        <option v-for="(item,index) in nameArr" :key="index" :value="item.id">{{item.name}}</option>
      </select>
    </div>
    <div class="add-btn" @click="addInput">增加+</div>
    <div class="del_btn" @click="delInput">删除-</div>
    <div class="get-btn" @click="getValue">获取值</div>
  </div>

</template>

<script>
  import mHeader from '../../../components/header'

  export default {
    data() {
      return {
        nameArr:[
          {id:0,name:'张三'},
          {id:1,name:'李四'},
          {id:2,name:'王五'},
          {id:3,name:'老六'},
        ],
        inputNum: 0,
        nameData: [] // 存放输入框值
      }
    },
    mounted() {
      this.addInput()
    },
    methods: {
      addInput() { // 确定添加的input文本框的个数
        if (this.inputNum < 5) {
          this.inputNum += 1
        }
      },
      delInput(){
        if (this.inputNum>1) {
          this.inputNum -= 1
        }
      },
      getValue() {
        let arr = [];
        for (var i = 0; i < this.inputNum; i++) {
          let inpu = 'input' + i; // 给每个input添加一个refs属性
          arr.push({
            index: "第" + i + "个",
            value: this.$refs[inpu][0].value // 根据refs获取每个input的值
          })
        }
        let shuzu = []
        for (var j = 0; j < arr.length; j++) {
          // console.log(arr[j].value)
          shuzu.push(arr[j].value)
          console.log(shuzu)
        }
        // this.nameData = shuzu
      }
    },
    components: {
      mHeader
    }
  }
</script>
<style lang="scss" scoped>
  .hello {
    padding-top: 50px;
    .input-box {
      border-bottom: 1px solid #f2f2f2;
      padding: 10px;
      select{
        width: 200px;
        height: 40px;
        option{
          text-align: center;
        }
      }
      input {
        width: 200px;
        height: 40px;
        border: 1px solid #333;
        border-radius: 5px;
      }
    }
    .add-btn {
      width: 200px;
      height: 30px;
      color: #fff;
      background: red;
      text-align: center;
      border-radius: 10px;
      line-height: 30px;
      margin-top: 10px;
    }
    .del_btn{
      width: 200px;
      height: 30px;
      color: #fff;
      background: #333333;
      text-align: center;
      border-radius: 10px;
      line-height: 30px;
      margin-top: 10px;
    }
    .get-btn {
      width: 120px;
      height: 30px;
      color: #fff;
      background: green;
      text-align: center;
      border-radius: 10px;
      line-height: 30px;
      margin-top: 10px;
    }
  }
</style>
